<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>货架管理</title>
  <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">
  <!--级联选择器-->
  <div class="block">
    <span class="demonstration"><el-tag>请选择需要查询的[仓库/库区/货架]</el-tag></span>
    <el-cascader :props="props" v-model="wareAndCargoAndShelf"></el-cascader>
<!--日期的选择-->
<el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
    </el-date-picker>
<!--点击搜索选择器中的内容-->
<el-button type="primary" icon="el-icon-search" @click="searchToShelf">搜索</el-button>
</div>
<br><br><br><br>
<el-button type="primary" @click="dialogShelfTreeVisible = true">添加货架</el-button>
<!--货架的添加的对话框-->
<el-dialog title="添加货架" :visible.sync="dialogShelfTreeVisible">
      <el-form :model="shelfAdd" >
          <el-form-item label="*所属仓库" :label-width="formLabelWidth">
            <el-select  v-model="thisWareId" placeholder="请选择仓库"  >
              <el-option
                      v-for="item in warehouseNameAll"
                      :key="item.value"
                      :label="item.wareName"
                      :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="*所属货区" :label-width="formLabelWidth">
          <el-select v-model="thisCargoId" placeholder="请选择货区" @click.native="selectCargo" >
            <el-option
                    v-for="item in cargoNameAll"
                    :key="item.value"
                    :label="item.goodsName"
                    :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="*货架编号"  :label-width="formLabelWidth">
          <el-input v-model="shelfAdd.shelvesNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货架商品描述" :label-width="formLabelWidth">
          <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="shelfAdd.mainProduct">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="shelfAdd.remark">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveShelf">确 定</el-button>
          <el-button @click="dontCls">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
<el-tag type="success">共有{{num}}个货架</el-tag>
  <!--表格-->
  <el-table
          :data="shelves"
          style="width: 100%">
    <el-table-column label="序号">
      <template slot-scope="scope">
        <span>{{scope.row.id}}</span>
      </template>
    </el-table-column>
    <el-table-column label="货架编号">
      <template slot-scope="scope">
        <span>{{scope.row.shelvesNo}}</span>
      </template>
    </el-table-column>
    <el-table-column label="所属货区">
      <template slot-scope="scope">
        <span >{{scope.row.goodsName}}</span>
      </template>
    </el-table-column>
    <el-table-column label="负责人">
      <template slot-scope="scope">
        <span >{{scope.row.person}}</span>
      </template>
    </el-table-column>
    <el-table-column label="联系电话">
      <template slot-scope="scope">
        <span >{{scope.row.telephone}}</span>
      </template>
    </el-table-column>
    <el-table-column label="主要商品">
      <template slot-scope="scope">
        <span>{{scope.row.mainProduct}}</span>
      </template>
    </el-table-column>
    <el-table-column label="创建时间">
      <template slot-scope="scope">
        <span>{{scope.row.creatTime}}</span>
      </template>
    </el-table-column>
    <el-table-column
            label="状态">
      <template slot-scope="scope">
                    <span style="margin-left: -10px" v-if=" scope.row.status ==='1'" >
                        <el-button type="success" round>已满</el-button>
                    </span>
        <span style="margin-left: -10px" v-if=" scope.row.status ==='0'">
                      <el-button  type="danger" round>未满</el-button>
                    </span>
      </template>
    </el-table-column>

    <el-table-column label="操作" style="width: 180px">
      <template slot-scope="scope">
        <!--改变状态-->
        <el-button type="success" icon="el-icon-check" circle
                   @click="updateStatus(scope.$index, scope.row)"></el-button>
        <!--修改-->
        <el-button type="primary" icon="el-icon-edit" circle
                   @click="handleEdit(scope.$index, scope.row)"></el-button>
      </template>
    </el-table-column>

  </el-table>
  <!--分页-->
  <el-pagination
          background
          @current-change="loadPageShelves"
          layout="prev, pager, next"
          :total="total"
          :current-page="current"
          :page-size="pageSize">
  </el-pagination>
  <!--货架编辑的详情-->
  <el-dialog title="编辑货架" :visible.sync="dialogModifyShelfVisible">
   <el-form :model="shelfUpdate" :inline="true"  class="demo-form-inline">

     <el-form-item label="货架编号："  :label-width="formLabelWidth">
       <el-input v-model="shelfUpdate.shelvesNo" autocomplete="off"></el-input>
     </el-form-item>

     <el-form-item label="*所属仓库："  :label-width="formLabelWidth">
       <el-input v-model="shelfUpdate.wareName" autocomplete="off"></el-input>
     </el-form-item>

     <el-form-item label="*所属货区："  :label-width="formLabelWidth">
       <el-input v-model="shelfUpdate.goodsName" autocomplete="off"></el-input>
     </el-form-item>

     <el-form-item label="*货区编号："  :label-width="formLabelWidth">
       <el-input v-model="shelfUpdate.goodsNo" autocomplete="off"></el-input>
     </el-form-item>

     <el-form-item label="*负责人："  :label-width="formLabelWidth">
       <el-input v-model="shelfUpdate.person" autocomplete="off"></el-input>
     </el-form-item>

     <el-form-item label="*联系电话："  :label-width="formLabelWidth">
       <el-input v-model="shelfUpdate.telephone" autocomplete="off"></el-input>
     </el-form-item>

     <el-form-item label="*主要商品"  :label-width="formLabelWidth">
       <el-input v-model="shelfUpdate.mainProduct" autocomplete="off"></el-input>
     </el-form-item>

     <el-form-item label="*货位数目"  :label-width="formLabelWidth">
       <el-input v-model="shelfUpdate.totalNum" autocomplete="off"></el-input>
     </el-form-item>

     <el-form-item label="*空置货位"  :label-width="formLabelWidth">
       <el-input v-model="shelfUpdate.emptySpace" autocomplete="off"></el-input>
     </el-form-item>

     <el-form-item label="*创建时间"  :label-width="formLabelWidth">
       <el-input v-model="shelfUpdate.creatTime" autocomplete="off"></el-input>
     </el-form-item>

     <el-form-item label="*状态"  :label-width="formLabelWidth">
       <el-input v-model="shelfUpdate.status" autocomplete="off"></el-input>
     </el-form-item>

     <el-form-item label="货架商品描述" :label-width="formLabelWidth">
       <el-input
               type="textarea"
               :rows="2"
               placeholder="请输入内容"
               v-model="shelfAdd.twDetails">
       </el-input>
     </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateShelf">确 定</el-button>
        <el-button @click="dontCls">取 消</el-button>
      </el-form-item>

    </el-form>
  </el-dialog>
</div>
</body>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
  let id = 0;
  new Vue({
    el:"#app",
    data() {
      return {
        num:0,//货架数目
        warehouseNameAll:null,//所有的仓库名
        cargoNameAll:null,//所有的库区名
        thisCargoId:null,//用于查询下级的货架--库区id
        thisWareId:null,//用于查询下级的库区--仓库id
        textarea: '',//添加货架框中的文本描述
        textarea1:'',//编辑框中的仓库文本描述
        value1:null,
        shelves:null,//表格的显示，元数据
        total:0,//总条数
        current:0,//当前条数
        pageSize:0,//每页条数
        dialogModifyShelfVisible:false,//编辑货架对话框
        dialogShelfTreeVisible:false,//添加货架对话框
        formLabelWidth:"100px",//表格的宽度
        wareAndCargoAndShelf:null,//输入框
        shelfAdd:{//添加货架的定义
          shelvesNo:'',
          wareId:'',
          damId:'',
          mainProduct:'',
          remark:''
        },
        shelfUpdate:{//货架编辑数据源
          id:'',
          shelvesNo:'',
          wareId:'',
          damId:'',
          mainProduct:'',
          totalNum:'',
          creatTime:'',
          status:'',
          goodsName:'',
          goodsNo:'',
          person:'',
          telephone:'',
          twDetails:'',
        },
        /*级联选择器的动态加载*/
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const {level} = node;
            setTimeout(() => {
         /*查询所有的仓库*/
         if (node.level == 0){
           /*查询到所有的仓库*/
           axios.get("/list/t-ware").then(value => {
             if (value.data.state == '1'){
               console.log(value)
               for (let i = 0; i < value.data.data.length; i++) {
                 const nodes = Array.from({length: level + 1})
                         .map(item => ({
                           value: value.data.data[i].wareName,
                           label: value.data.data[i].wareName,
                           leaf: level >= 2
                         }));
                 // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                 resolve(nodes);
               }
             }
             })
             }
         /*根据仓库查询库区*/
         if (node.level == 1){
           console.log(node.value)
           axios.get("/cargo/"+node.value).then(value => {
             if (value.data.state == '1') {
               console.log(value);
               for (let i = 0; i < value.data.data.length; i++) {
                 const nodes = Array.from({length: level })
                         .map(item => ({
                           value: value.data.data[i].goodsName,
                           label: value.data.data[i].goodsName,
                           leaf: level >= 2
                         }));
                 // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                 resolve(nodes);
               }
             }
           })
         }
         /*根据库区查询该库区下所有的货架*/
         if (node.level == 2){
           axios.get("/shelves/"+node.value).then(value => {
             if (value.data.state == '1') {
               console.log(value);
               for (let i = 0; i < value.data.data.length; i++) {
                 const nodes = Array.from({length: level - 1})
                         .map(item => ({
                           value: value.data.data[i].shelvesNo,
                           label: value.data.data[i].shelvesNo,
                           leaf: level >= 2
                         }));
                 // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                 resolve(nodes);
               }
             }
           })
         }
            }, 50);
          }
        }
    }
    },
    methods: {
        /*清空添加输入框*/
        cleanAdd(){
            this.shelfAdd={//添加货架的定义
              shelvesNo:'',
              wareId:'',
              damId:'',
              mainProduct:'',
              remark:''
            }
        },
      /*条件查询1*/
      searchToShelf() {
        let wareAndCargoAndShelf = this.wareAndCargoAndShelf;
        let value1 = this.value1;
        /*两者都为空*/
        if (wareAndCargoAndShelf == null && value1 == null){
            this.loadPageShelves(1);
          this.$message({
            type: 'success',
            message: '查询全部'
          });
        }
        /*只查询创建时间*/
        if (wareAndCargoAndShelf == null && value1 != null){
          axios.get("/t-shelves/time/"+value1,{
            current:this.current,
          }).then(value => {
            if (value.data.state == '1'){
              if (value.data.data.length == 0){
                this.$message({
                  type: 'success',
                  message: '查询为空!'
                });
                this.shelves = null;
              }else {
                this.shelves = value.data.data.records;
                this.total = value.data.data.total;
                this.pageSize = value.data.data.size;
                this.current = value.data.data.current;
                this.$message({
                  type: 'success',
                  message: '已查询!'
                });
              }
            }
          })
        }
        /*只查询货架编号*/
        if (wareAndCargoAndShelf != null && value1 == null){
          axios.get("/t-shelves/" + this.wareAndCargoAndShelf[0] + "/" +
                  this.wareAndCargoAndShelf[1] + "/" + this.wareAndCargoAndShelf[2],{
            current:this.current,
          }).then(value => {
            if (value.data.state == '1'){
              if (value.data.data.length == 0){
                this.$message({
                  type: 'success',
                  message: '查询为空!'
                });
                this.shelves = null;
              }else {
                this.shelves = value.data.data.records;
                this.total = value.data.data.total;
                this.pageSize = value.data.data.size;
                this.current = value.data.data.current;
                this.$message({
                  type: 'success',
                  message: '已查询!'
                });
              }
            }
          })
        }
        /*两者都不为空*/
        if (wareAndCargoAndShelf != null && value1 != null) {
        axios.get("/t-shelves/" + this.wareAndCargoAndShelf[0] + "/" +
                this.wareAndCargoAndShelf[1] + "/" + this.wareAndCargoAndShelf[2]
                + "/" + this.value1,{
          current:this.current,
        }).then(value => {
          if (value.data.state == 1) {
            if (value.data.data.length == 0){
              this.$message({
                type: 'success',
                message: '查询为空!'
              });
            }else {
              this.shelves = value.data.data.records;
              this.total = value.data.data.total;
              this.pageSize = value.data.data.size;
              this.current = value.data.data.current;
              this.$message({
                type: 'success',
                message: '已查询!'
              });
            }
          }
        })
      }
      },
      /*货架的添加*/
      saveShelf(row){
        axios.post("/shelf/add",{wareId:this.thisWareId,
          damId:this.thisCargoId,
          shelvesNo:this.shelfAdd.shelvesNo,
          mainProduct:this.shelfAdd.mainProduct,
          remark:this.shelfAdd.remark})
                .then(value => {
          if (value.data.state == 1 ){
            this.$message("添加成功");
            this.cleanAdd();
            this.loadPageShelves(this.current);
            this.dialogShelfTreeVisible= false;
          }
        })
      },
      /*失去焦点事件*/
      selectCargo(){
        console.log("====>>>"+this.thisWareId)
        //加载所有的库区名
        axios.get("/t-ware/cargo/"+this.thisWareId).then(value => {
          if (value.data.state == 1){
            console.log(value.data.data);
            this.cargoNameAll=value.data.data;
          }
        });
      },
      /*货架信息的编辑更新*/
      updateShelf(row){
        axios.put("/t-shelves/updateShelves",
        {
          id:this.shelfUpdate.id,
          shelvesNo:this.shelfUpdate.shelvesNo,
          wareId:this.shelfUpdate.wareId,
          damId:this.shelfUpdate.damId,
          mainProduct:this.shelfUpdate.mainProduct,
          totalNum:this.shelfUpdate.totalNum,
          creatTime:this.shelfUpdate.creatTime,
          status:this.shelfUpdate.status,
          emptySpace:this.shelfUpdate.emptySpace,
        }).then(value => {
          if (value.data.state == '1'){
          }
        });
        /*修改货区*/
        axios.put("/t-cargo-area/updateCargoArea/",{
          id:this.shelfUpdate.damId,
          goodsName:this.shelfUpdate.goodsName,
          goodsNo:this.shelfUpdate.goodsNo
        }).then(value1 => {
          if (value1.data.state == 1) {
          }
        });
        /*修改仓库*/
        axios.put("/t-ware/updateWare/", {
          id:this.shelfUpdate.wareId,
          person:this.shelfUpdate.person,
          telephone:this.shelfUpdate.telephone,
          wareName:this.shelfUpdate.wareName,
          details:this.shelfUpdate.twDetails,
        }).then(value1 => {
          if (value1.data.state == 1) {
          }
        });
        this.$message({
          type: 'success',
          message: '编辑成功!'
        });
        this.dontCls();
      },
      /*货架信息的编辑框中的信息填充*/
      handleEdit(index,row){
        this.shelfUpdate=row;
        this.dialogModifyShelfVisible = true;
      },
      /*数据的双向绑定*/
      dontCls(){
        this.cleanAdd();
        this.dialogShelfTreeVisible = false;
        this.dialogModifyShelfVisible= false;
      },
      /*修改状态*/
      updateStatus(row,index) {
        console.log("row"+row);
        console.log("index"+index);
        this.$confirm('修改当前状态!, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.put("/shelf",
                  {status:this.shelves[row].status,
                   id:this.shelves[row].id,
                  }
                  ).then(value => {
                    if (value.data.state == '1' ){
                      this.$message({
                        type: 'success',
                        message: '修改成功!'
                      });
                      this.loadPageShelves(this.current);
                    }
                  })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
        });
      },
      /*分页查询所有的货架信息 */
      loadPageShelves(current){
        this.current=current;
        axios.get("/shelves?current="+current).then(value => {
          if (value.data.state == 1 ){
            this.shelves = value.data.data.records;
            this.total = value.data.data.total;
            this.pageSize = value.data.data.size;
            this.current = value.data.data.current;
          }
        })
      }
    },
    /*装载*/
    mounted(){
      this.loadPageShelves(1);

      //加载所有的仓库名
      axios.get("/list/t-ware").then(value => {
        if (value.data.state == 1){
          this.warehouseNameAll=value.data.data;
        }
      });
      /*查询表格条数及货架数量*/
      axios.get("/shelf/count").then(value => {
        if (value.data.state == 1){
          this.num = value.data.data;
        }
      })
    },
  })


</script>
</html>